import React, {useState} from 'react'

import style from './clientForm.module.less'
import {Button, Form, Input, notification, Select} from "antd";
import {CheckCircleOutlined, CloseCircleOutlined, CloseOutlined, PlusCircleOutlined} from "@ant-design/icons";

export default function ClientForm({onCallback}) {
    const [form] = Form.useForm()
    const [formData, setFormData] = useState('')
    const [message, setMessage] = useState(null)
    const websocketMap = new Map()
    const formRules = {
        name: [
            {
                required: true,
                message: '请输入自定义名称!',
            },
        ],
        type: [
            {
                required: true,
                message: '请选择协议类型!',
            },
        ],
        ip: [
            {
                required: true,
                message: '请输入服务地址!',
            },
        ],
        port: [
            {
                required: true,
                message: '请输入服务端口!',
            }
        ]
    }

    const onFinish = (values) => {
        console.log('正在添加设备')
        console.log(values)
        const form = {
            ws_id: 'aaa',
            type: values.type,
            name: values.name,
            ip: values.ip,
            port: values.ports,
            status: 0
        }
        const result = window.electronAPI.ws_InsertDevice(form)
        console.log(result)
        notification.success({
            message: '成功',
            description: '设备添加成功',
            placement: 'topRight'
        })
    };



    return (
        <div className={style.container}>
            <div className={style.title}>编辑连接信息</div>
            <Form
                labelCol={{span: 10}}
                name="add-device-form"
                onFinish={onFinish}
                initialValues={{
                    remember: true,
                }}
                layout="inline"
                style={{width: '100%'}}
            >
                <Form.Item
                    label="自定义名称"
                    name="name"
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.name}
                >
                    <Input placeholder="请输入自定义名称" style={{width: '200px'}}/>
                </Form.Item>

                <Form.Item
                    label="协议类型"
                    name="type"
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.type}
                >
                    <Select placeholder="请选择协议类型" style={{width: '200px'}}>
                        <Select.Option value="ws">ws</Select.Option>
                        <Select.Option value="wss">wss</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="服务地址"
                    name="ip"
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.ip}
                >
                    <Input placeholder="请输入服务地址" style={{width: '200px'}}/>
                </Form.Item>

                <Form.Item
                    label="服务端口"
                    name="port"
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.port}
                >
                    <Input placeholder="请输入服务端口" style={{width: '200px'}}/>
                </Form.Item>

                <Form.Item
                    label="用户名"
                    name="username"
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.username}
                >
                    <Input placeholder="请输入用户名" style={{width: '200px'}}/>
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    labelCol={{span: 10}}
                    style={{width: '280px', margin: '5px'}}
                    rules={formRules.password}
                >
                    <Input.Password placeholder="请输入密码" style={{width: '200px'}}/>
                </Form.Item>

                <Form.Item style={{
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'flex-end',
                    marginTop: '20px',
                    paddingRight: '90px'
                }}>
                    <Button  style={{marginRight: '10px'}} icon={<CloseCircleOutlined/>}>
                        取消
                    </Button>
                    <Button type="primary" htmlType="submit"
                            icon={<CheckCircleOutlined/>}>
                        添加
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}